import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import { createForm } from 'rc-form';
import MyScroll from '../../components/MyScroll/MyScroll';
import {  Icon ,WingBlank,Button,InputItem,Flex,Toast} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {balance} from './balance.less';



class Balance extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr:["50","100","200","300","500","1000",],
            value:""
        };
    }

    componentDidMount(){

    }
    onChange = (value) => {
        if (value > 10000) {
            this.setState({
                value: 10000,
            });
        } else {
            this.setState({
                value,
            });
        }

    }
    render() {
        const { getFieldProps } = this.props.form;

        function siblings(elm) {
            var a = [];
            var p = elm.parentNode.children;
            for(var i =0,pl= p.length;i<pl;i++) {
                if(p[i] !== elm) a.push(p[i]);
            }
            return a;
        }

        let newVar = {height:"100%",};
        return (
            <div className={balance} style={{height:"100%"}}>
                <NavTopBar title="账户余额" dispatch={this.props.dispatch}/>
                <MyScroll style={{height:"100%"}}  >
                    <div style={{background:"#fff",padding:".3rem"}}>
                        <WingBlank >
                            <div style={{padding:".3rem 0",borderBottom:"1px solid #999999"}}>
                                <p style={{fontSize:".3rem",marginBottom:".2rem"}}>可用余额</p>
                                <p style={{color:"#ff0036",fontSize:".4rem"}}>¥{this.props.match.params.data.split(",")[0]}</p>
                            </div>
                            <div style={{padding:".3rem 0"}}>
                                <p style={{fontSize:".3rem",marginBottom:".2rem"}}>锁定余额</p>
                                <p style={{fontSize:".4rem",color:"#999999"}}>¥{this.props.match.params.data.split(",")[1]}</p>
                            </div>
                        </WingBlank>
                    </div>
                    <div style={{marginTop:".2rem",backgroundColor:"#fff",padding:".3rem",paddingBottom:".2rem"}}>
                        <WingBlank >
                            <div style={{fontSize:".3rem",padding:".3rem 0",borderBottom:"1px solid #999999"}}>余额充值</div>
                            <div style={{fontSize:".3rem",padding:".3rem 0"}}>请选择充值金额</div>
                            <Flex wrap="wrap" justify="around">
                                {
                                    this.state.arr.map((value,i)=>{
                                        return <div  key={i} style={{borderRadius:".45rem",border:"1px solid #e5e5e5",
                                            width:"2rem",marginBottom:".2rem",textAlign:"center",fontSize:".4rem",padding:".1rem 0"}} className="numberMoney" onClick={(e)=>{
                                            e.target.style.backgroundColor="#ff0036";
                                            e.target.style.color="#fff";
                                            this.setState({
                                                money: value,
                                                value
                                            });
                                            for(let i=0;i<siblings(e.target).length;i++){
                                                siblings(e.target)[i].style.backgroundColor="";
                                                siblings(e.target)[i].style.color="";
                                            }
                                        }}>¥{value}</div>
                                    })
                                }
                            </Flex>
                            <InputItem {...getFieldProps('digit')} clear placeholder="请输入自定义金额"
                                       type="digit"
                                       style={{borderRadius:".45rem",border:"1px solid #e5e5e5",padding:".2rem .3rem",fontSize:".3rem"}}
                                       value={this.state.value} onChange={this.onChange}/>
                            <div style={{padding:".2rem 0",marginLeft:".6rem"}}>最大充值金额10000元</div>
                        </WingBlank>
                    </div>
                </MyScroll>
                <Button  style={{width:"100%",paddingBottom:'.2rem',position:"fixed",bottom:"0",backgroundColor:"#ff0036",color:"#fff"}} onClick={()=>{
                    const {value} = this.state;
                    console.log(value)
                    if(value==undefined||value==""){
                        Toast.fail("请输入有效的充值金额!",1.5)
                    }else{
                        if(value!=undefined){

                            this.props.dispatch({ type: 'accountManagement/rechargeEFF', obj:{ amount: value} }).then(ret => {
                                this.props.dispatch(routerRedux.replace({
                                    pathname: `/payMent/${value},,${ret.ret.sn},recharge`,
                                }))
                            });


                        }
                    }

                }}>去支付</Button>
            </div>
        );
    }
}


export default connect(({ accountManagement }) => ({ accountManagement }))(createForm()(Balance));
